<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="100px">

      <el-form-item label="样品名称">
        <el-input v-model="queryParams.sampleName" clearable></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
      </el-form-item>
    </el-form>



    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          >新增样品</el-button>
      </el-col>
    </el-row>
    <el-table v-loading="loading" :data="AttenceStaList" >
      <el-table-column label="样品名称" align="center" prop="sampleName" :show-overflow-tooltip="true" />
      <el-table-column label="采样时间" align="center" prop="sampleDate" :show-overflow-tooltip="true" />
      <el-table-column label="开/关门" align="center" prop="doorStatus" :show-overflow-tooltip="true" />
      <el-table-column label="健康证图片" align="center" prop="sampleImg" :show-overflow-tooltip="true">
          
          <template slot-scope="scope">
            <el-image v-for="(item,i) in scope.row.sampleImg.split(',')" :key="i" 
                style="width: 60px; height: 60px"
                :src="getImgPath(item)" 
                :preview-src-list="[getImgPath(item)]">
            </el-image>
          </template>
      </el-table-column>
      <el-table-column label="操作" align="center" >
        <template slot-scope="scope">
            
            <el-tooltip class="item" effect="dark" content="修改" placement="top" >
                <el-button 
                        size="mini"
                        circle type="warning"
                        icon="el-icon-edit"
                        @click="editSupplier(scope.row)"
                />
            </el-tooltip>  
            <el-tooltip class="item" effect="dark" content="删除" placement="top" >
                <el-button 
                        size="mini"
                        circle type="danger"
                        icon="el-icon-delete"
                        @click="deleteSupplier(scope.row)"
                />
            </el-tooltip>  
        </template>
      </el-table-column>
    </el-table>


    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />


    <el-dialog title="编辑留样" :visible="outDialogVisible" width="55%" :before-close="cancel">
        <el-form :model="formData" ref="formData" label-width="140px" :rules="rules">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="样品名称" prop="sampleName">
                        <el-input v-model="formData.sampleName"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="采样时间" prop="sampleDate">
                        <el-date-picker style="width: 275px;"
                            v-model="formData.sampleDate"
                            type="datetime"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            format="yyyy-MM-dd HH:mm:ss"
                            placeholder="选择日期">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="开/关门" prop="doorStatus">
                        <el-radio v-model="formData.doorStatus" label="1">开</el-radio>
                        <el-radio v-model="formData.doorStatus" label="0">关</el-radio>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="开/关门时间" prop="openDoorTime">
                        <el-date-picker style="width: 275px;"
                            v-model="formData.openDoorTime"
                            type="datetime"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            format="yyyy-MM-dd HH:mm:ss"
                            placeholder="选择日期">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>
            
            <el-row>
                <el-col :span="24">
                    <el-form-item label="采样图片">

                        <el-upload
                            class="upload-demo"
                            list-type="picture-card"
                            :action="uploadFile"
                            :headers="headers"
                            :on-success="handleSuccess"
                            :on-remove="handleRemove"
                            :before-upload="handleBefore"
                            :limit="10"
                            :file-list="fileList">
                            <i class="el-icon-plus"></i>
                            
                            <div slot="tip" class="el-upload__tip">只能上传图片文件，且不超过1M</div>
                        </el-upload>

                    </el-form-item>
                </el-col>
            </el-row>
            
            
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button  type="primary" @click="submitSupplier">提交</el-button>
            <el-button @click="cancel">取 消</el-button>
        </div>
    </el-dialog>

    



  </div>
</template>



<script>
  import { getSamplePageList, addOrUpdateSampleInfo,deleteSampleById } from "@/api/canteen/foodSample";
  import { getToken } from '@/utils/auth'

  export default {
    name: "healthcert",
    computed:{
        headers(){
        return {
            //'Content-Type': 'multipart/form-data',
            Authorization: "Bearer " + getToken()
        }
        }
    },
    data(){
      return{
        uploadFile:process.env.VUE_APP_BASE_API + "/common/file/uploadFile",
        // 遮罩层
        loading: true,
        goodsLoading:true,
        outDialogVisible:false,
        detailLoading:false,
        addGoodsDialogVisible:false,
        goodsListDialogVisible:false,
        healthLoading:false,
        // 总条数
        total: 0,
        AttenceStaList: [],
        goodsList:[],
        detailList:[],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10
        },
        queryGoodsParams:{
          pageNum: 1,
          pageSize: 10
        },
        formData:{

        },
        goodsFormData:{
            supplierId:undefined
        },
        fileList:[],
        rules:{
            sampleName:[{ required: true, message: '请输入样品名称', trigger: 'blur' }],
            sampleDate:[{ required: true, message: '请选择采样时间', trigger: 'blur' }],
            doorStatus:[{ required: true, message: '请选择开/关门', trigger: 'blur' }],
            openDoorTime:[{required: true, message: '请选择开/关门时间', trigger: 'blur'}]
        }
        
      }
    },
    components:{
      // bargraph
    },
    created() {
        this.getList();
    },
    methods: {

      /** 查询任务量列表 */
      getList() {
        this.loading = true;
        getSamplePageList(this.queryParams).then(response => {
            this.AttenceStaList = response.data.records;
            this.total = response.data.total;
            this.loading = false;
        });
      },
      // 取消按钮
      cancel() {
        this.outDialogVisible =false
        this.formData={}
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.dateRange = [];
        this.resetForm("queryForm");
        this.handleQuery();
      },
      resetForm(){
          this.formData={
            sampleName:undefined,
            sampleDate:undefined,
            sampleImg:undefined,
            doorStatus:undefined,
            openDoorTime:undefined
        }
        this.fileList=[]
      },
      handleAdd(){
        this.outDialogVisible = true
        this.resetForm()
        this.fileList=[]
      },
      submitSupplier(){
          console.log(this.fileList)
          if(this.fileList.length==0){
              this.$message({ message: '请上传照片', type: 'warning' });
              return
          }
          let urls=[]
          for(let i=0; i<this.fileList.length;i++){
              urls.push(this.fileList[i].dbUrl)
          }
          this.formData.sampleImg = urls.join(',');
          console.log(this.formData)
          this.$refs['formData'].validate((valid)=>{
              if(valid){
                  addOrUpdateSampleInfo(this.formData).then(resp=>{
                    this.$message({  message: '提交成功', type: 'success'});
                    this.getList()
                    this.outDialogVisible=false
                  })
              }
          })
      },
      deleteSupplier(row){
          this.$confirm('健康证信息将被删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(()=>{
            deleteSampleById(row).then(resp=>{
                this.$message({ type: 'success', message: '删除成功!' });
                this.getList()
            })
            
        })
      },
      editSupplier(row){
          this.outDialogVisible=true
          this.formData = row
          const imgs = this.formData.sampleImg.split(',')
          for(let i=0;i<imgs.length;i++){
              this.fileList.push({
                name:imgs[i].substr(imgs[i].indexOf("/")),
                dbUrl:imgs[i],
                url:this.getImgPath(imgs[i])
              })
          }
          
      },

      handleSuccess(response,file, fileList){
          this.fileList.push({
            name:file.name,
            url:this.getImgPath(file.response.data),
            dbUrl: file.response.data
          })
          console.log('success',file)
          console.log('success', this.fileList)
      },
      handleRemove(file, fileList){
          let fileListbk=[]
          for(let i=0;i<fileList.length;i++){
            const item = fileList[i]
            const data = item.response.data
            fileListbk.push({
                name:item.name,
                url:getImgPath(item.response.data),
                dbUrl: item.response.data
            })
          }
          this.fileList=fileListbk
          console.log('remove',file)
          console.log('remove',fileList)
      },
      handleBefore(file){
        console.log('before',file)
        const maxSize = 1024*1024
        if(file.size>maxSize){
            this.$message({ message: '上传文件不能大于1M', type: 'warning' });
            return false
        }
        if(file.type.indexOf("image")<0){
            this.$message({ message: '请上传图片文件', type: 'warning' });
            return false
        }
        return true
      }
    }
  }
</script>
